<template>
    <view-box style="background:#F3F6F7;">
      <div style="height:10px;"></div>
       <div class="co-laou" v-for="(item, index) in items" :key="index" >
           <div class="laou-bor-c" @click="$router.push('/postNews/' + item.news_id)">
               <div class="img-laou">
                   <img :src="$apiUrl + '/storage/' + item.news.thumb" alt="">
               </div>
               <div class="width-cp-laouy">
                   <p class="posjkdii" style="width:100%;font-size:16px;font-weight: 500;">{{item.news.title}}</p>
                   <p class="bouoiwid" style="width:100%;font-size:13px;color:#bababa;">{{item.news.description}}</p>
               </div>
           </div>
           <div class="width-poljh">
               <p style="font-size:13px;color:#bababa;width:60%;">{{item.created_at}}</p>
               <p style="width:40%;text-align: right;">
                   <span style="color:#32B6C6;" @click="del(item.news_id)">删除</span>
                </p>
           </div>
      </div>
        <!--<items :items="items"></items>-->
        <infinite-loading @infinite="infiniteHandlers" ref="infiniteLoading">
            <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
            <empty slot="no-results" tips="暂时没有相关信息"></empty>
        </infinite-loading>
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      index01: 0,
      demo2: '美食',
      demoDisabled: 'A',
      index: 0,
      items: [],
      user: [{
        account: '',
        avatar: ''
      }]
    }
  },
  methods: {
    del (id) {
      this.$http.post('/cancel/shoucang', {
        news_id: id
      }).then(response => {
        this.$vux.toast.show({
          text: '删除成功',
          type: 'text'
        })
        this.$router.go(0)
        this.$router.push({ path: '/collect' })
      }).catch(error => {
        console.log(error)
      })
    },
    infiniteHandlers ($state) {
      this.$http.get('/shoucang', {
        copm: {
          page: this.items.length / 20 + 1,
          page_size: 20
        }
      }).then(response => {
        if (response.data.data.length) {
          this.items = this.items.concat(response.data.data)
          console.log(this.items)
          $state.loaded()
          if (!response.data.next_page_url) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
    .vux-slider {
        height: 100%;
    }
.co-laou{
width: 92%;
margin-left: 4%;
background: #fff;
opacity: 0.8;
height: auto;
margin-top: 10px;
border-radius: 7px;
}
.co-bott-om{
  display: flex;
  width: 92%;
  margin-left: 4%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.work-job-lj {
    width: 25%;
    display: flex;
    align-items: center;
}
.work-job-lj p{
    font-size: 15px;

}
.work-job-cl{
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.job-pol-col{
  width: 100%;
  font-weight: 600;
}
.work-job-cl p{
  text-align: left;
  font-size: 15px;
}
.co-pljh{
  width: 92%;
  margin-left: 4%;
  padding: 8px 0px;
  font-size: 14px;
}
.work-job-pl{
 width: 35%;
}
.laou-bor-c{
    width: 92%;
    margin-left: 4%;
    display: flex;
    border-bottom: 1px solid #f4f4f4;
    padding-top: 5px;
    padding-bottom: 5px;
}
.img-laou{
    width: 30%;
    display: flex;
    align-items: center;
    
}
.img-laou img{
    width: 70px;
    height: 70px;
    border-radius: 7px;
}
.width-cp-laouy{
    width: 70%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.width-poljh{
    width: 92%;
    margin-left: 4%;
    padding-top: 5px;
    display: flex;
    padding-bottom: 5px;
}
.posjkdii{
  height: 50px;
  line-height: 50px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.bouoiwid{
   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>